<template>
    <router-link :to="{name: currentLink}" class="user-bar has-header" tag="div">
        <div class="avatar">
            <template v-if="currentUser.name">
                <img src="../assets/avatar.png" alt="avatar" />
            </template>
            <template v-else>
                <img src="../assets/user_normal.jpg" alt="未登录" >
            </template>
        </div>
        <span class="holder">{{holder}}</span>
        <i class="icon icon-camera"></i>
        <i class="icon icon-pen"></i>
    </router-link>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
    name: 'UserBar',
    data(){
        return {

        }
    },
    computed: {
        ...mapGetters(['currentUser']),
        holder: function(){
            return this.currentUser.name ? this.currentUser.name : '请先登录'
        },
        currentLink: function(){
            return this.currentUser.name ? "HomeView" : 'LoginView'
        }
    }
}
</script>

<style lang="scss" scoped>
    .user-bar {
        position: relative;
        overflow: hidden;
        padding: 1rem 1.8rem;
        border-bottom: 0.1rem solid #ccc;
    }

    .avatar {
        width: 4rem;
        height: 4rem;
        display: inline-block;
    
        img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }
    }
    .holder {
        color: #ccc;
        font-size: 1.8rem;
        vertical-align: middle;
    }

    .icon {
        width: 3rem;
        height: 3rem;
        // display: inline-block;
        float: right;
        margin-left: 1.8rem;
        margin-top: 0.8rem;
    }

    .icon-camera {
        background-image: url(../assets/camera.svg)
    }

    .icon-pen {
        background-image: url(../assets/pen.svg)
    }
</style>
